<template>
    <div>
        <el-upload
            action="http://quan-cloud-test.oss-cn-shenzhen.aliyuncs.com"
            :data="dataObj"
            :list-type="listType"
            :multiple="false"
            :show-file-list="showFileList"
            :file-list="fileList"
            :before-upload="handleBeforeUpload"
            :on-success="handleUploadSuccess"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :class="{disabled : fileList[0].url}"
        >
            <i class="el-icon-plus" v-if="listType === 'picture-card'"></i>

            <el-button size="small" type="primary" v-else>点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div> -->
        </el-upload>

        <el-dialog :visible.sync="dialogVisible" :modal="false">
            <img width="100%" :src="fileList[0].url" alt="" />
        </el-dialog>
    </div>
</template>
<script>
import { policy } from "./policy";
import { getUUID } from "@/libs";

export default {
    name: "singleUpload",
    props: {
        value: String,
        listType: {
            type: String,
            // picture,picture-card
            default: "picture"
        },
    },
    computed: {
        imageUrl() {
            return this.value;
        },
        imageName() {
            if (this.value != null && this.value !== "") {
                return this.value.substr(this.value.lastIndexOf("/") + 1);
            } else {
                return null;
            }
        },
        fileList() {
            return [
                {
                    name: this.imageName,
                    url: this.imageUrl
                }
            ];
        },
        showFileList: {
            get: function() {
                return (
                    this.value !== null &&
                    this.value !== "" &&
                    this.value !== undefined
                );
            },
            set: function(newValue) {}
        }
    },
    data() {
        return {
            dataObj: {
                policy: "",
                signature: "",
                key: "",
                ossaccessKeyId: "",
                dir: "",
                host: ""
            },
            dialogVisible: false
        };
    },
    methods: {
        emitInput(val) {
            this.$emit("input", val);
        },
        handleRemove(file, fileList) {
            this.emitInput("");
        },
        handlePreview(file) {
            this.dialogVisible = true;
        },
        handleBeforeUpload(file) {
            let _self = this;
            return new Promise((resolve, reject) => {
                policy().then(response => {
                    // console.log("服务端签名：" + JSON.stringify(response));
                    _self.dataObj.policy = response.data.policy;
                    _self.dataObj.signature = response.data.signature;
                    _self.dataObj.ossaccessKeyId = response.data.accessid;
                    _self.dataObj.key = response.data.dir + getUUID() + "_${filename}";
                    _self.dataObj.dir = response.data.dir;
                    _self.dataObj.host = response.data.host;
                    resolve(true);
                }).catch(err => {
                    reject(false);
                });
            });
        },
        handleUploadSuccess(res, file) {
            // console.log('===>handleUploadSuccess');
            this.showFileList = true;
            this.fileList.pop();
            this.fileList.push({
                name: file.name,
                url: this.dataObj.host + "/" + this.dataObj.key.replace("${filename}", file.name)
            });
            this.emitInput(this.fileList[0].url);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.disabled .el-upload--picture-card, .disabled .el-upload--picture{
    display: none;
}
</style>
